<template>
    <div>
        <h1>tools-javascript工具库</h1>
        <div>
            对浏览器环境的常用需求进行封装的轻量插件，比如缓存、请求、定时器、事件管理等，插件大小：
            <span style="color: green; font-size: 20px; font-weight: bold">20Kb</span>
            ，Gzip开启：
            <span style="color: green; font-size: 20px; font-weight: bold">8Kb</span>
        </div>
        <h2>Npm使用</h2>
        <h3>安装</h3>
        <div>在项目中执行以下指令，支持cnpm、pnpm、yarn</div>
        <div class="code">npm i tools-javascript</div>
        <h3>使用</h3>
        <div>在项目中的main.js文件或者main.ts文件中第一行导入后即可使用所有功能</div>
        <div class="code">import 'tools-javascript'</div>

        <h2>CDN使用</h2>
        <div>
            建议将文件下载到自己项目中引入，此链接只做演示，可能随时关闭或切换
            <a href="https://cdn.c44.cc/js/tools-javascript.js" target="_blank">点我去下载</a>
        </div>
        <h3>安装</h3>
        <div>在html文件中导入（尽量放在第一个导入）</div>
        <div class="code">{{ conf.str }}</div>
        <h3>使用</h3>
        <div>在所有js文件内即可使用所有功能</div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const conf = reactive({
    str: `<script src="https://cdn.c44.cc/js/tools-javascript.js"><\/script>`
})
</script>
<style lang="less" scoped></style>
